<template>
  <el-row class="main-container">
    <el-col :span="8" class="content-wrapper">
      <el-card shadow="hover">
        <template #header>
          <el-row :gutter="10">
            <el-col :span="1.5">
              <el-button type="success" plain icon="Plus" @click="handleAdd()">新增</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="primary" plain icon="Refresh" @click="handleQuery()">查询</el-button>
            </el-col>
          </el-row>
        </template>
        <el-table
          :data="tableData"
          row-key="roleId"
          :highlight-current-row="true"
          :current-row-key="selectedRole.roleId"
          empty-text="暂无数据"
          border
          style="width: 100%"
          @row-click="handleRowClick"
        >
          <el-table-column key="roleName" prop="roleName" label="角色名称" align="center" />
          <el-table-column
            label="操作"
            fixed="right"
            width="200"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-tooltip content="修改" placement="top">
                <el-button
                  v-if="scope.row.roleId !== '1'"
                  link
                  type="primary"
                  icon="Edit"
                  @click="handleUpdate(scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button
                  v-if="scope.row.roleId !== '1'"
                  link
                  type="warning"
                  icon="Delete"
                  @click="handleDelete(scope.row)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16" class="content-wrapper menu-wrapper">
      <el-card>
        <template #header>
          <div class="card-header">
            <el-select class="select-system" placeholder="请选择系统" v-model="selectedSystemId">
              <el-option
                v-for="item in systemList"
                :key="item.menuId"
                :label="item.menuName"
                :value="item.menuId"
              />
            </el-select>
          </div>
        </template>
        <RoleMenuTree
          ref="roleMenuTreeRef"
          :systemId="selectedSystemId"
          :roleId="selectedRole.roleId"
        />
      </el-card>
    </el-col>
    <!-- 新增角色弹窗 -->
    <RoleAddDialog
      v-model:visible="dialog.visible"
      :title="dialog.title"
      :role="dialog.role"
      ref="roleAddDialogRef"
      @refresh="handleQuery"
    />
  </el-row>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, useTemplateRef } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
import { useAuthStore } from '@/stores/modules/auth'
import { menuApi, roleApi } from '@/api'
import { SysRole } from '@/api/system/roleTyppe'
import RoleAddDialog from '@/components/system/role/RoleAddDialog.vue'
import RoleMenuTree from '@/components/system/role/RoleMenuTree.vue'
import { SysMenu } from '@/api/system/menuType'
import { MenuTypeEnum } from '@/enums/dictEnum'
const authStore = useAuthStore()
const loginUser = computed(() => authStore.loginUser)

// 对话框
const dialog = reactive({
  visible: false,
  title: '',
  role: { roleId: '', roleName: '' } as SysRole,
  type: 'add'
})

// 表格数据
const tableData = ref<any[]>([])

const selectedRole = ref<SysRole>({ roleId: '', roleName: '' })

/** 系统列表 */
const systemList = ref<SysMenu[]>([])

/** 选中的系统 */
const selectedSystemId = ref(loginUser.value.systemId || '')

onMounted(() => {
  handleQuery()
  findSystemList()
})

// 处理行点击事件
const handleRowClick = (row: SysRole) => {
  selectedRole.value = { ...row }
}

/** 查询用户列表 */
const handleQuery = () => {
  findRoleList()
}

/** 新增用户点击事件 */
const handleAdd = () => {
  dialog.visible = true
  dialog.title = '新增角色'
  dialog.type = 'add'
}

/** 修改用户点击事件 */
const handleUpdate = (row: any) => {
  dialog.visible = true
  dialog.title = '修改角色'
  dialog.type = 'update'
  dialog.role = row
}

/** 删除用户点击事件 */
const handleDelete = (row: SysRole) => {
  ElMessageBox.confirm('确认删除角色【' + row.roleName + '】吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteRole(row)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除角色'
      })
    })
}

/** 查询角色列表 */
const findRoleList = () => {
  roleApi
    .findRoleList(loginUser.value.companyId)
    .then((res: any) => {
      tableData.value = res || []
    })
    .catch(() => {
      ElMessage.error('查询角色列表失败')
    })
}

/** 删除角色 */
const deleteRole = (row: SysRole) => {
  roleApi
    .deleteRole(row.roleId)
    .then(() => {
      ElMessage.success('删除角色成功')
      findRoleList()
    })
    .catch(() => {
      ElMessage.error('删除角色失败')
    })
}

/** 查询系统列表 */
const findSystemList = () => {
  const queryParam = {
    menuType: MenuTypeEnum.SYSTEM
  }
  menuApi
    .findMenuList(queryParam)
    .then((res: any) => {
      systemList.value = res || []
    })
    .catch((err) => {
      ElMessage.error(err || '查询系统列表失败')
    })
}
</script>

<style scoped lang="less">
.main-container {
  height: 100%;
  :deep(.el-card__body) {
    padding: 10px 20px;
  }
  :deep(.el-form-item--default) {
    margin-bottom: 0;
  }
  .content-wrapper {
    height: 100%;
    :deep(.el-card) {
      height: 100%;
    }
    :deep(.el-card__body) {
      height: 100%;
    }
  }
  .menu-wrapper {
    padding-left: 10px;
    .select-system {
      width: 200px;
    }
  }
}
</style>
